<template>
    <div class="layout">
        <div class="header">
            <el-tree
                class="menu-list"
                style="max-width: 600px"
                :data="list"
                :props="defaultProps"
                @node-click="handleMenuClick"
            />
        </div>        
        <div class="body">
            <div class="body-header">
                <div></div>
                <div>
                    <button @click.prevent="changeLanguage">{{ language }}</button>
                </div>
            </div>
            <div class="body-content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import layoutStore from '@/store/index'
import { I18NType } from '@/app.config';
import { useRouter } from 'vue-router';
import { commonRouter } from '@/router/common-router';

const router = useRouter()
const layoutSe = layoutStore()
const language = computed(() => layoutSe.getLanguage)
const changeLanguage = () => {
    console.log('language.value', language.value)
  layoutSe.setLanguage(language.value === I18NType.EN_US ? I18NType.ZH_CN : I18NType.EN_US )
}

const defaultProps = {
  children: 'children',
  label: 'label',
}
const list = ref<any>([])
const initMenu = () => {
    list.value = handleRouter(commonRouter)
}
const handleRouter = (routerList: any) => {
    const _handleList: any = []
    for(let item of routerList) {
        const _router: any = {}
        _router.name = item.name
        _router.label = item.meta.label
        if(item.children?.length > 0) {
            _router.children = handleRouter(item.children)
        }
        _handleList.push(_router)
    }
    return _handleList
}
const handleMenuClick = (data: any) => {
    router.push({name: data.name})
}
onMounted(() => {
    initMenu()
})
</script>

<style lang="scss" scoped>
.layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .header {
        width: 12rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        box-shadow: 0px 5px 7px #b8b8b8;

        .menu-list {
            width: 100%;
            margin-top: 1rem;
        }
    }

    .body {
        flex: 1;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        .body-header {
            width: 100%;
            height: 3rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0 12px;
            box-sizing: border-box;
            box-shadow: 5px 1px 6px #b8b8b8;
        }

        .body-content {
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            margin: 16px 0;
            padding: 0 12px;
            box-sizing: border-box;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
}
</style>